
/**
 * Created by zhouaqian on 2017/4/18.
 */
var React = require('react');

var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var GoodSwiper = require('../widget/GoodSwiper');
var ajax = require('../tools/ajax');
var IncreaseId = require('../../web/tools/IncreaseId');
var AttrContent = require('../widget/AttrContent');
var MsgBox = require('../components/MsgBox');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default",
            list_info:{},
            goods_id:this.props.params.goodId,
            flag:true
        }
    },
    myScroll:"",

    componentDidMount: function () {
        var good_id = this.state.goods_id;
        this.getGoodsDetailByid(good_id);
        this.fleshNum();
        var back = localStorage.getItem("back");
        this.refs.bheader.setState({hact:back});
        //layer.open({type: 2});
        //setTimeout(function(){
        //    layer.closeAll('loading');
        //}, 2500);
    },
    componentDidUpdate(){
        setTimeout(this.iscroll,800);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#goodDetailWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
    },
    /**修改购物车数量*/
    fleshNum:function(){
        this.refs.bheader.fleshNum();
    },
    /**获取商品详情信息 */
    getGoodsDetailByid(id){
        var p = this;
        ajax("POST","getGoodsDetailByid",{id:id},function(dt){
            if(dt && dt.success){
                var objs = dt.data[0];
                console.log(objs);
                p.setState({list_info:objs});
            }
        });
    },
    /**添加到购物车信息 */
    addCart: function () {
        var p = this;
        var userId = localStorage.getItem('userId');
        var list_info = this.state.list_info;
        if(userId){
            var id = IncreaseId.increaseId();
            var goods_name = p.refs.goodname.innerText;
            var goods_id = this.state.goods_id;
            var goods_price = list_info.goods_price;
            var goods_number = list_info.goods_number;
            var goods_attr = list_info.goods_attr;
            var goods_type = list_info.goods_type;
            var shop_id = list_info.shop_id;
            var good_tax_rate = list_info.good_tax_rate;
            var good_tax_fee = good_tax_rate / 100 * goods_price * goods_number;
            ajax("POST","addCart",{
                id:id,
                user_id:userId,
                goods_id:goods_id,
                goods_name:goods_name,
                goods_price:goods_price,
                goods_number:goods_number,
                goods_type:goods_type,
                shop_id:shop_id,
                goods_attr:goods_attr,
                good_tax_fee:good_tax_fee
            },function(dt){
                if(dt && dt.success){
                    var objs = dt.data;
                    console.log('添加购物车成功');
                }
            });
        } else{
            location.href = '#login';
        }
    },
    //弹出选项框
    AttrContent(e){
        var p=this;
        var goods_id = e.currentTarget.getAttribute('data-id');
        console.log(goods_id);
        if(goods_id){
            p.refs.attrContent.setState({
                flag:p.state.flag
            },()=>{
                p.refs.attrContent.getProinfoById(goods_id);
            });
            p.setState({goods_id:goods_id});
            var flag = p.state.flag;
            if(flag == false){
                p.setState({flag:true})
            }
        }
    },
    MsgBox(){
        var word = this.refs.attrContent.state.word;
        console.log(">>>"+word);
        if(word){
            this.refs.MsgBox.setState({
                type: "no",
                timeout:1000,
                show:true,
                word:word
            })
        }
    },
    render: function () {
        var p=this;
        var list_info = this.state.list_info;
        console.log(list_info);
        if(list_info.goods_img) {
            var goods_img = list_info.goods_img.split(",");
        }
        if(list_info.original_img){
            var imgList = list_info.original_img.split(",").map(function (obj,index) {
                return (
                    <img key={index} src={obj} id="imgDetail"/>
                )
            });
        }
        return (
            <div className="main"  id="main">
                <Bheader ref="bheader" theme={this.state.theme} title="产品详情"></Bheader>
                <div id="goodDetailWrapper" className="container-t wrap">
                    <div className="goods_detail">
                        <div className="goods_con">
                            <GoodSwiper ref="goodSwiper" goods_img={goods_img}></GoodSwiper>
                            <p className="goods_name" ref="goodname">
                                {list_info.goods_name}
                            </p>
                            <p className="goods_price">
                                ￥<span className="price">{list_info.shop_price}</span>
                            </p >
                            <hr className="orderHr"/>
                            <div className="goods_info">
                                <p className="title">商品信息:</p>
                                <ul>
                                    <li className="left">
                                        品牌：<span className="infoBold">{list_info.brand_name}</span>
                                    </li>
                                    <li className="right">
                                        规格：<span className="infoBold">{list_info.goods_guige}</span>
                                    </li>
                                    <li className="left">
                                        产地：<span className="infoBold">{list_info.gc_name}</span>
                                    </li>
                                    <li className="right">
                                        产品剂型：<span className="infoBold">{list_info.good_unit}</span>
                                    </li>
                                    <li className="left">
                                        库存：<span className="infoBold">{list_info.goods_number}</span>
                                    </li>
                                </ul>
                            </div>
                            <div className="pro-detail" id="pro-detail">
                                <p className="title">详情:</p>
                                {imgList}
                            </div>

                        </div>
                    </div>
                    <AttrContent ref="attrContent" MsgBox={p.MsgBox} fleshNum={p.fleshNum}></AttrContent>
                </div>
                <div className="goods_btn">
                    <div className="goods_coll" data={list_info.id}>
                        收藏
                    </div>
                    <div className="goods_addcart" data-id={list_info.id} onClick={p.AttrContent}>
                        加入购物车
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});